<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            overflow: 0;
            box-sizing: border-box;
            color: #2c3e50;
            font-family: Avenir, Helvetica, Arial, sans-serif;

        }


        main {
            width: 600px;
            height: 650px;
            margin: 30px auto;
        }

        .options {
            height: 50px;
            display: flex;

        }

        .option {
            height: 100%;
            width: 100px;
            background-color: #fff;
            color: black;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }

        .active {
            background-color: #000000;
            color: white;
        }

        .show {
            border: 1px solid black;
            height: 600px;
            width: 600px;
        }

        .show img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .jpg {
            display: none;
        }

        .text {
            display: none;
        }

        .showtext {
            display: block;
            font-size: 30px;
            line-height: 600px;
            text-align: center;
        }
    </style>
</head>

<body>
    <main>
        <div class="options">
            <div class="option">选项1</div>
            <div class="option">选项2</div>
            <div class="option">选项3</div>
            <div class="option">选项4</div>
        </div>
        <div class="show">
            <img src="./src/1.jpg" class="jpg">
            <div class="text showtext">请选择卡片</div>
        </div>
    </main>


    <script>

        document.onselectstart = () => false;

        function $(val) {
            return document.querySelectorAll(val);
        }

        (() => {

            let init = () => {
                let tabs = [...$('.option')];
                initIndex();
                loadLoacalStorage(tabs);
                bindClick(tabs);
            }

            function loadLoacalStorage(tabs) {

                if (!!localStorage.getItem('init')) initIndex();
                if (!!localStorage.getItem('index')) {
                    let i = localStorage.getItem('index');
                    tabs[i - 1].classList.add('active');
                    $('[src]')[0].src = Tool.getUrl(i);

                }
            }

            class Tool {
                static getUrl(index) {
                    let baseUrl = './src/{INDEX}.jpg';
                    return baseUrl.replace('{INDEX}', index);
                }
                
            }



            function initIndex() {
                $('img')[0].classList.remove('jpg');
                $('.text')[0].classList.remove('showtext');
                localStorage.setItem('init', true);
            }

            function bindClick(tabs) {
                tabs.map((item, index) => {
                    item.addEventListener('click', function () {
                        initIndex();
                        tabs = [...$('.option')].map((item) => item.classList.remove('active'));
                        this.classList.add('active');
                        $('[src]')[0].src = Tool.getUrl(index + 1);
                        localStorage.setItem('index', index + 1)
                    })
                })
            }


            init();

        })()






    </script>

</body>

</html>